<template>
    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm lg:px-8 py-5 mx-6">
        <form action="#" @submit.prevent="submit()">
            <div class="flex-col flex flex-1">
                <div class="mt-5">
                    <div class="avatar placeholder">
                        <div v-if="imgSrc==null"  class="bg-neutral-focus text-neutral-content rounded-full w-56">
                            <span class="text-9xl">{{ String(useAuthStore().user?.username).substring(0,1).toUpperCase() }}</span>
                        </div>
                        <div v-else class="bg-neutral-focus text-neutral-content rounded-full w-56">
                            <img alt="" :srcset="imgSrc" />
                        </div>
                    </div>
                </div>
                <input type="file" @change="imageChange()" id="file"
                       accept="image/*"
                       class="focus:outline-0  uploadFile file-input-bordered file-input mt-5"/>
            </div>
            <label class="block text-sm font-medium leading-6 text-base-content text-left">手机号码</label>
            <div class="mt-2">
                <input id="username" name="username" type="text"
                       placeholder="可填"
                       v-model="user.phone"
                       class="input input-bordered w-full focus:outline-0 rounded-md py-1.5 block">
            </div>
            <label class="block text-sm font-medium leading-6 text-base-content text-left">个人简介</label>
            <div class="mt-2">
<!--                <textarea class="textarea textarea-bordered" placeholder="Bio"></textarea>-->
                <input id="username" name="username" type="text"
                       placeholder="可填"
                       v-model="user.remark"
                       class="input input-bordered w-full focus:outline-0 rounded-md py-1.5 block">
            </div>
            <input type="submit" class="btn w-full mt-5" value="注册完成">
        </form>
        <ul class="steps mt-6 mb-10 h-20">
            <li class="step step-primary">注册</li>
            <li class="step step-primary">设置个人信息</li>
            <li class="step step-primary">登录</li>
        </ul>
    </div>

</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {useAuthStore} from "../plugins/pinia.ts";

let imgSrc = ref(null)

function imageChange() {
    let file = $('#file').prop("files")[0];
    let fileReader = new FileReader();
    fileReader.readAsDataURL(file)
    fileReader.onload = function (ev) {
        if (typeof ev.target.result === "string") {
            imgSrc.value = ev.target.result
            user.avatar = file;
            // uploadFile(file, file.name)
        }
    }
}

let user = reactive({
    remark: null,
    avatar: null,
    phone: null,
})

function submit() {
  useAuthStore().register_step2(user);
}

</script>

<style scoped>

</style>